// echart  配置文件
import * as echarts from "echarts"
import img from "../../../../assets/bigscreen/icon/fireLevel.png"
import icon1 from "../../../../assets/bigscreen/icon/trendNumber.png"
import {
  fireDangerGoods,
  fireDangerSource,
  fireHazardousChemicals,
  fireHistory,
  fireHydrantIndoor,
  fireHydrantOutdoor,
  fireReserveMaterials,
  fireStation,
  fireWater,
  microStation,
  securityMonitor,
  societyUnit,
  unitInfo,
} from "@/api/bigscreen/overview"

export const menu = [
  {
    key: "state",
    name: "消防队站",
    param: "fireStationNum",
    num: 56,
    list: fireStation,
    icon: require("../../../../assets/bigscreen/menu/fireStationNum.png"),
  },
  {
    key: "state",
    name: "微型消防站",
    num: 56,
    param: "miniFireStationNum",
    list: microStation,
    icon: require("../../../../assets/bigscreen/menu/miniFireStationNum.png"),
  },
  {
    key: "key-unit",
    name: "重点单位",
    num: 56,
    param: "companyNum",
    list: unitInfo,
    icon: require("../../../../assets/bigscreen/menu/companyNum.png"),
  },
  {
    key: "state",
    name: "社会联动单位",
    num: 56,
    param: "societyUnitNum",
    list: societyUnit,
    icon: require("../../../../assets/bigscreen/menu/societyUnitNum.png"),
  },
  {
    key: "water",
    name: "消防水源",
    label: "水源类型",
    num: 56,
    param: "fireWaterNum",
    list: fireWater,
    icon: require("../../../../assets/bigscreen/menu/fireWaterNum.png"),
  },
  {
    key: "water",
    name: "室内消火栓",
    label: "接口类型",
    num: 56,
    param: "fireHydrantIndoorNum",
    list: fireHydrantIndoor,
    icon: require("../../../../assets/bigscreen/menu/fireHydrantIndoorNum.png"),
  },
  {
    key: "water",
    name: "室外消火栓",
    label: "接口类型",
    num: 56,
    param: "fireHydrantOutdoorNum",
    list: fireHydrantOutdoor,
    icon: require("../../../../assets/bigscreen/menu/fireHydrantOutdoorNum.png"),
  },
  {
    key: "danger",
    name: "危险源",
    num: 56,
    label: "所属分类",
    param: "fireDangerSourceNum",
    list: fireDangerSource,
    icon: require("../../../../assets/bigscreen/menu/fireDangerSourceNum.png"),
    detail: "danger",
  },
  {
    key: "danger",
    name: "危险品",
    param: "fireDangerGoodsNum",
    num: 56,
    list: fireDangerGoods,
    icon: require("../../../../assets/bigscreen/menu/fireDangerGoodsNum.png"),
    detail: "danger",
  },
  {
    key: "danger",
    name: "危化品",
    num: 56,
    param: "fireHazardousChemicalsNum",
    list: fireHazardousChemicals,
    icon: require("../../../../assets/bigscreen/menu/fireHazardousChemicalsNum.png"),
    detail: "danger",
  },
  {
    key: "camera",
    name: "安防监控",
    num: 56,
    param: "securityMonitorNum",
    list: securityMonitor,
    icon: require("../../../../assets/bigscreen/menu/securityMonitorNum.png"),
  },
  {
    key: "water",
    name: "历史重大灾情",
    label: "发生时间",
    num: 56,
    param: "fireHistoryNum",
    list: fireHistory,
    detail: "history",
    icon: require("../../../../assets/bigscreen/menu/fireHistoryNum.png"),
  },
  {
    key: "state",
    name: "消防物资储备库",
    num: 56,
    detail: "goods",
    param: "fireStoragePointNum",
    list: fireReserveMaterials,
    icon: require("../../../../assets/bigscreen/menu/fireStoragePointNum.png"),
  },
]

export const lineOptions = (data) => {
  return {
    grid: {
      bottom: 35,
      top: 30,
      left: "15%",
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b0}: {c0}",
      className: "echarts-tooltip echarts-tooltip-dark",
    },
    xAxis: {
      nameTextStyle: {
        color: "#fff",
      },
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      type: "category",
      data: ["公安", "消防", "专家", "交通", "急救", "水电", "煤气"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: data,
        type: "bar",
        barWidth: "45%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: "rgba(0, 128, 255, 0.82)" },
            { offset: 0, color: "rgba(42, 199, 255, 0.82)" },
          ]),
        },
        label: {
          show: true,
          position: "top",
          color: "rgba(255, 255, 255, 1)",
        },
      },
    ],
  }
}

export const circleOptions = (data) => {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      width: "70%",
      bottom: "3%",
      left: "center",
      textStyle: {
        color: "#C0CEE5",
      },
    },
    title: {
      text: ["{value|" + data.total + "}", "{name|总数}"].join("\n"),
      top: "30%",
      left: "center",
      textStyle: {
        rich: {
          value: {
            color: "#03F0FF",
            fontSize: "0.26rem",
          },
          name: {
            color: "#C0CEE5",
            fontSize: "0.15rem",
          },
        },
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "60%"],
        center: ["50%", "40%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          textStyle: {
            color: "#42CCCB",
          },
        },
        emphasis: {
          label: {
            show: true,
            textStyle: {
              color: "#42CCCB",
            },
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: "#42CCCB",
            },
          },
        },
        itemStyle: {
          borderColor: "transparent",
          borderWidth: 4,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: data.fireHydrantNum,
            name: "室外消火栓",
            itemStyle: {
              color: "#2D4AB9",
            },
          },
          {
            value: data.waterCraneNum,
            name: "水鹤",
            itemStyle: {
              color: "#2B8CF3",
            },
          },
          {
            value: data.firePipeNum,
            name: "消防管网",
            itemStyle: {
              color: "#E4E4E4",
            },
          },
          {
            value: data.reservoirNum,
            name: "蓄水池",
            itemStyle: {
              color: "#9CBED1",
            },
          },
          {
            value: data.waterSourceNum,
            name: "自然水源",
            itemStyle: {
              color: "#15E986",
            },
          },
          {
            value: data.pierNum,
            name: "取水码头",
            itemStyle: {
              color: "#42CCCB",
            },
          },
        ],
      },
    ],
  }
}

export const lineOptions2 = (data) => {
  return {
    grid: {
      bottom: 35,
      top: 30,
      left: "15%",
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b0}: {c0}",
      className: "echarts-tooltip echarts-tooltip-dark",
    },
    xAxis: {
      nameTextStyle: {
        color: "#fff",
      },
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
        interval: 0, //使x轴文字显示全
        formatter: function (params) {
          let newParamsName = ""
          const paramsNameNumber = params.length
          const provideNumber = 4 //一行显示几个字
          const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
          if (paramsNameNumber > provideNumber) {
            for (let p = 0; p < rowNumber; p++) {
              let tempStr = ""
              const start = p * provideNumber
              const end = start + provideNumber
              if (p === rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber)
              } else {
                tempStr = params.substring(start, end) + "\n"
              }
              newParamsName += tempStr
            }
          } else {
            newParamsName = params
          }
          return newParamsName
        },
      },
      type: "category",
      data: [
        "消防车辆",
        "救护车辆",
        "警用车辆",
        "工程救援车辆",
        "污染治理车辆",
        "救援装备车辆",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data,
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: "rgba(0, 128, 255, 0.82)" },
            { offset: 0, color: "rgba(42, 199, 255, 0.82)" },
          ]),
        },
        label: {
          show: true,
          position: "top",
          color: "rgba(255, 255, 255, 1)",
        },
      },
    ],
  }
}
export const FireCountOption = (x, y) => {
  return {
    grid: {
      bottom: 35,
      top: 30,
      left: "15%",
      // containLabel: true
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b0}: {c0}",
      className: "echarts-tooltip echarts-tooltip-dark",
    },
    xAxis: {
      nameTextStyle: {
        color: "#fff",
      },
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
        formatter: (v) => {
          return parseInt(v.split("-")[1]) + "月"
        },
      },
      type: "category",
      data: x,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: y,
        type: "bar",
        barWidth: "35%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(18, 164, 196, 0.82)" },
            { offset: 1, color: "rgba(121, 211, 210, 0.82)" },
          ]),
        },
        label: {
          show: true,
          position: "top",
          color: "rgba(255, 255, 255, 1)",
        },
      },
    ],
  }
}
export const buildFireCountOption = (x, y) => {
  return {
    grid: {
      bottom: "5%",
      top: "5%",
      left: "5%",
      right: "5%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      className: "echarts-tooltip echarts-tooltip-dark",
      // formatter: function (params) {
      //   return (
      //     params[0].name +
      //     '<br/>' +
      //     "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
      //     params[0].seriesName +
      //     ' : ' +
      //     Number(
      //       (params[0].value.toFixed(4) / 10000).toFixed(2),
      //     ).toLocaleString() +
      //     ' 万元<br/>'
      //   );
      // },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true, //排序
        axisLabel: {
          show: true,
          textStyle: {
            color: "#C9D2FA",
            fontSize: "0.12rem",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: x,
      },
      // {
      //   type: 'category',
      //   inverse: true,
      //   axisTick: 'none',
      //   axisLine: 'none',
      //   show: true,
      //   axisLabel: {
      //     textStyle: {
      //       color: '#ffffff',
      //       fontSize: 12,
      //     },
      //     // formatter: function (value) {
      //     //   if (value >= 10000) {
      //     //     return (value / 10000).toLocaleString() + '万';
      //     //   } else {
      //     //     return value.toLocaleString();
      //     //   }
      //     // },
      //   },
      //   data: [45, 26, 14, 12, 5],
      // },
    ],
    series: [
      {
        name: "次数",
        type: "bar",
        // zlevel: 1,
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          { offset: 1, color: "rgba(62, 74, 100, 0.82)" },
          { offset: 0, color: "rgba(184, 193, 196, 0.82)" },
        ]),
        label: {
          show: true, // 显示标签
          position: "right",
          fontSize: "0.12rem",
          color: "#fff",
          offset: [10, 0],
        },
        barWidth: "25%",
        data: y,
      },
      // {
      //   name: '背景',
      //   type: 'bar',
      //   barWidth: 20,
      //   barGap: '-100%',
      //   data: [50000000, 50000000, 50000000, 50000000, 1],
      //   itemStyle: {
      //     normal: {
      //       color: 'rgba(24,31,68,1)',
      //       barBorderRadius: 30,
      //     },
      //   },
      // },
    ],
  }
}
export const fireLevelCountOption = (x, y) => {
  let yline = []
  for (let i = 0; i < y.length; i++) {
    yline.push({ value: y[i], name: x[i] })
  }
  // let img = '.'
  return {
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: img,
            width: 72,
            height: 72,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    tooltip: {
      show: true,
    },
    legend: {
      // type: 'scroll',
      top: "bottom",
      orient: "horizontal",
      // right: '20%',
      icon: "rect",
      itemWidth: 10,
      itemHeight: 10,
      pageIconColor: "#00EBFF",
      pageIconInactiveColor: "rgba(0, 235, 255, 0.4)",
      pageTextStyle: {
        color: "#FFF",
      },
      textStyle: {
        color: "#fff",
        //图例样式修改
        rich: {
          name: {
            width: 60,
            fontSize: 12,
            fontWeight: 500,
            align: "top",
          },
          value: {
            width: 20,
            //  color: '#FFF',
            fontSize: 12,
            fontWeight: 500,
            align: "left",
          },
          rate: {
            width: 30,
            align: "left",
            fontSize: 12,
            //  color: '#FFF',
          },
        },
      },
      //自定义legend图例
      // formatter: function (name) {
      //   let total = 0
      //   let target
      //   for (let i = 0; i < datas.length; i++) {
      //     total += datas[i].value
      //     if (datas[i].name === name) {
      //       target = datas[i].value
      //     }
      //   }
      //   var arr = [
      //     '{name|' + name + '}',
      //     '{value|' + target + '}',
      //     '{rate|' + ((target / total) * 100).toFixed(2) + '%}'
      //   ]
      //   return arr.join('  ')
      // },
      data: x,
    },
    color: ["#6EB4FC", "#FFE667", "#FF9342", "#FF484B"],
    series: {
      name: "",
      type: "pie",
      hoverAnimation: false,
      center: ["50%", "50%"],
      radius: ["35%", "50%"],
      data: yline,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
    },
  }
}
export const trendCountOption = (data) => {
  return {
    // title: {
    // text: 'Stacked Line'
    // },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["预警", "故障", "隐患"],
      pageTextStyle: {
        color: "#FFF",
      },
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // toolbox: {
    // feature: {
    //   saveAsImage: {}
    // }
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "预警",
        type: "line",
        stack: "Total",
        data: data[0],
      },
      {
        name: "故障",
        type: "line",
        stack: "Total",
        data: data[1],
      },
      {
        name: "隐患",
        type: "line",
        stack: "Total",
        data: data[2],
      },
    ],
  }
}
export const trendNumberOption = (data) => {
  let colorList = [
    "#eaa257",
    "#11d8ff",
    "#11d8ff",
    "#11d8ff",
    "#11d8ff",
    "#11d8ff",
  ]
  let result = data
  return {
    color: colorList,
    // backgroundColor: 'rgba(23, 51, 67,.1)',
    tooltip: {
      show: true,
      trigger: "item",
      padding: [8, 15],
      // backgroundColor: 'rgba(23, 51, 67,.1)',
      textStyle: {
        color: "rgba(255, 255, 255, 1)",
      },
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b0}: {c0}",
      className: "echarts-tooltip echarts-tooltip-dark",
    },
    legend: {
      show: false,
    },
    grid: {
      left: "100",
      // right: '50',
      top: "0",
      bottom: "0",
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        type: "category",
        axisTick: {
          show: false,
        },
        inverse: true,
        data: result.map((item) => item.name),
        axisLabel: {
          color: "#fff",
          fontSize: 14,
          // margin: 10,
          width: 50,
          overflow: "truncate",
          padding: [0, 50, 0, 0],
          // 	nameTextStyle: {
          // 	overflow: 'truncate',
          // 	width: 10  // 无法实现坐标轴名称溢出指定宽度隐藏
          // },
          formatter: (name, index) => {
            const id = index + 1
            if (id < 4) {
              return `{icon1|${id}}`
            } else {
              // return `{icon2|${id}}`;
            }
          },
          rich: {
            icon1: {
              width: 20,
              height: 20,
              padding: [5, 0, 2, 0],
              align: "center",
              backgroundColor: {
                image: icon1,
              },
              color: "#ffffff",
              fontSize: 10,
            },
          },
        },
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          // align: 'right',
          margin: 0,
          // padding: [0, 0, 15, 0],
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          formatter: function (value) {
            return value
          },
        },
        data: result.map((item) => item.value),
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 8, // 柱子宽度
        MaxSize: 0,
        // showBackground: true,
        barBorderRadius: [30, 0, 0, 30],
        backgroundStyle: {
          // color:'rgb(33,66,88)',
        },
        label: {
          show: true,
          offset: [-50, 0],
          color: "#fff",
          fontWeight: 500,
          position: "left",
          align: "left",
          formatter: function (params) {
            return params.data.name
          },
        },
        data: result.map((item, index) => {
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              // barBorderRadius: [30, 0, 0, 30],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#00FFFF",
                  },
                  {
                    offset: 0,
                    color: "#0080FF",
                  },
                ],
              },
            },
          }
        }),
      },
      // {
      // 	name: "外圆",
      // 	type: "scatter",
      // 	emphasis: {
      // 		scale: false,
      // 	},
      // 	symbol: "rect",
      // 	// symbolSize: [15,32],// 进度条白点
      // 	itemStyle: {
      // 		barBorderRadius: [30, 0, 0, 30],
      // 		color: '#FFF',
      // 		shadowColor: "rgba(255, 255, 255, 0.5)",
      // 		shadowBlur: 5,
      // 		borderWidth: 1,
      // 		opacity: 1,
      // 	},
      // 	z: 2,
      // 	data: result,
      // 	animationDelay: 500,
      // },
    ],
  }
}

// 辅助原判---------------系列图表
// 左边图表
// 火灾数量同比图
export const fourLeft1Option = (data1, data2, data3) => {
  return {
    // 图表的位置
    grid: {
      left: "12%",
      right: "7%",
      bottom: "16%",
    },
    tooltip: {
      trigger: "axis",
    },
    color: ["#008AE5", "#14CCC0", "#C9D44E"],
    legend: {
      textStyle: {
        color: "#ffffff",
      },
      top: 9,
      data: ["2022", "2023", "2024"],
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: true, // 坐标轴两边留白策略
        // x坐标轴刻度标签的相关设置。
        nameTextStyle: {
          color: "#fff",
        },
        // 刻度颜色
        axisLabel: {
          color: "#fff",
          interval: 0, // 坐标轴刻度标签的显示间隔
          rotate: 0, // 标签倾斜的角度
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        // y轴字体颜色
        nameTextStyle: {
          color: "#fff",
        },
        // 刻度颜色
        axisLabel: {
          color: "rgba(192, 206, 229, 1)",
        },
        // 分割线颜色
        splitLine: {
          show: true,
          lineStyle: {
            color: "#173B67",
            width: 1,
            type: "solid",
          },
        },
      },
    ],
    series: [
      {
        name: "2022",
        type: "bar", // 柱状图
        emphasis: {
          // 高亮的图形样式和标签样式。
          focus: "series",
        },
        data: data1,
      },
      {
        name: "2023",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: data2,
      },
      {
        name: "2024",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: data3,
      },
    ],
  }
}

// 火灾类型趋势图
export const fourLeft2Option = (data) => {
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["A类", "B类", "C类", "\n", "D类", "E类", "F类"],
      textStyle: {
        color: "#ffffff",
      },
      top: 9,
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    color: ["#AFC8FA", "#1C64C4", "#03F0FF", "#5689EE", "#56CEA0", "#5A6D8F"],
    xAxis: {
      type: "category",
      alignTicks: "center",
      boundaryGap: false, // 坐标轴两边留白策略
      // x坐标轴刻度标签的相关设置。
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: {
      type: "value",
      // y轴字体颜色
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      // 分割线颜色
      splitLine: {
        show: true,
        lineStyle: {
          color: "#173B67",
          width: 1,
          type: "solid",
        },
      },
    },
    series: [
      {
        name: "A类",
        type: "line",
        data: data.a1,
      },
      {
        name: "B类",
        type: "line",
        data: data.b1,
      },
      {
        name: "C类",
        type: "line",
        data: data.c1,
      },
      {
        name: "D类",
        type: "line",
        data: data.d1,
      },
      {
        name: "E类",
        type: "line",
        data: data.e1,
      },
      {
        name: "F类",
        type: "line",
        data: data.f1,
      },
    ],
  }
}

// 灾情热力图
export const fourLeft3Option = (data) => {
  return {
    tooltip: {
      position: "top",
    },
    grid: {
      top: "24%",
      bottom: "14%",
    },
    xAxis: {
      type: "category",
      data: ["一般火灾", "较大火灾", "重大火灾", "特别重大火灾"],
      boundaryGap: true, // 坐标轴两边留白策略
      // x坐标轴刻度标签的相关设置。
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "#fff",
        interval: 0, // 坐标轴刻度标签的显示间隔
        rotate: 0, // 标签倾斜的角度
      },
    },
    yAxis: {
      type: "category",
      data: ["A类", "B类", "C类", "D类", "E类"],
      boundaryGap: true, // 坐标轴两边留白策略
      // x坐标轴刻度标签的相关设置。
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "#fff",
        interval: 0, // 坐标轴刻度标签的显示间隔
        rotate: 0, // 标签倾斜的角度
      },
    },
    visualMap: {
      min: 0,
      max: 10,
      calculable: true,
      orient: "horizontal",
      left: "center",
      bottom: "15%",
      show: false,
      color: ["#4568AD", "#6385C7", "#87A5E0", "#AFC8FA"],
    },
    series: [
      {
        type: "heatmap",
        data: data,
        label: {
          show: true,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  }
}

// 中间--左边
// 火灾类型占比图
export const fourCenterLeft1Option = (data) => {
  return {
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: "https://csdnimg.cn/release/blogv2/dist/pc/img/original.png",
            width: 85,
            height: 80,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "15%",
      orient: "vertical",
      left: "4%",
      textStyle: {
        color: "#ffffff",
      },
    },
    color: ["#98E47E", "#03F0FF", "#7666FA", "#FF771E", "#FF597C", "#F0C246"],
    series: [
      {
        type: "pie",
        radius: ["40%", "60%"],
        center: ["62%", "55%"],
        label: {
          show: true,
          color: "#fff",
          formatter(param) {
            return param.name + " (" + param.percent * 2 + "%)"
          },
        },
        data: data,
      },
    ],
  }
}
// 火灾等级分布
export const fourCenterLeft2Option = (x, y) => {
  return {
    tooltip: {
      trigger: "item",
    },
    // 图表的位置
    grid: {
      left: "12%",
      right: "5%",
      bottom: "15%",
    },
    xAxis: {
      type: "category",
      boundaryGap: true, // 坐标轴两边留白策略
      // x坐标轴刻度标签的相关设置。
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "#fff",
        interval: 0, // 坐标轴刻度标签的显示间隔
        rotate: 0, // 标签倾斜的角度
      },
      data: x,
    },
    yAxis: {
      type: "value",
      // y轴字体颜色
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      // 分割线颜色
      splitLine: {
        show: true,
        lineStyle: {
          color: "#173B67",
          width: 1,
          type: "solid",
        },
      },
    },
    dataZoom: [
      {
        type: "inside",
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 16, // 柱图宽度
        label: {
          show: true,
          position: "top",
          color: "#fff",
          fontSize: "0.12rem",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#00FFFF" },
            { offset: 0.5, color: "#075673" },
            { offset: 1, color: "#0C1E46" },
          ]),
        },
        data: y,
      },
    ],
  }
}
// 火灾数量统计
export const fourCenterLeft3Option = (x, y) => {
  return {
    tooltip: {
      trigger: "item",
    },
    // 图表的位置
    grid: {
      left: "12%",
      right: "5%",
      bottom: "15%",
    },
    xAxis: {
      type: "category",
      boundaryGap: true, // 坐标轴两边留白策略
      // x坐标轴刻度标签的相关设置。
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "#fff",
        interval: 0, // 坐标轴刻度标签的显示间隔
        rotate: 0, // 标签倾斜的角度
      },
      data: x,
    },
    yAxis: {
      type: "value",
      // y轴字体颜色
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      // 分割线颜色
      splitLine: {
        show: true,
        lineStyle: {
          color: "#173B67",
          width: 1,
          type: "solid",
        },
      },
    },
    dataZoom: [
      {
        type: "inside",
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 16, // 柱图宽度
        label: {
          show: true,
          position: "top",
          color: "#fff",
          fontSize: "0.12rem",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FF4E00" },
            { offset: 0.5, color: "#532929" },
            { offset: 1, color: "#121933" },
          ]),
        },
        data: y,
      },
    ],
  }
}

// 中间--右边
// 火警历史警情统计
export const fourCenterRight1Option = (data) => {
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["A中队", "B中队", "C中队"],
      textStyle: {
        color: "#ffffff",
      },
      top: 9,
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    color: ["#E69C00", "#00B5A5", "#0081EB", "#9CBED1", "#2D4AB9"],
    xAxis: {
      type: "category",
      alignTicks: "center",
      boundaryGap: true, // 坐标轴两边留白策略
      // x坐标轴刻度标签的相关设置。
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: {
      type: "value",
      // y轴字体颜色
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      // 分割线颜色
      splitLine: {
        show: true,
        lineStyle: {
          color: "#173B67",
          width: 1,
          type: "solid",
        },
      },
    },
    series: [
      {
        name: data.a.name,
        type: "line",
        stack: "all",
        data: data.a.data,
      },
      {
        name: data.b.name,
        type: "line",
        stack: "all",
        data: data.b.data,
      },
      {
        name: data.c.name,
        type: "line",
        stack: "all",
        data: data.c.data,
      },
      {
        name: data.d.name,
        type: "line",
        stack: "all",
        data: data.d.data,
      },
      {
        name: data.e.name,
        type: "line",
        stack: "all",
        data: data.e.data,
      },
    ],
  }
}

// 日常告警数据统计
export const fourCenterRight2Option = (x, y) => {
  return {
    // 图表的位置
    grid: {
      left: "12%",
      right: "7%",
      bottom: "16%",
    },
    tooltip: {
      trigger: "axis",
    },
    color: ["#FF4E00", "#00FFFF", "#FFDD00"],
    legend: {
      textStyle: {
        color: "#ffffff",
      },
      top: 9,
      left: "8%",
      data: ["预警", "故障", "隐患"],
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: true, // 坐标轴两边留白策略
        // x坐标轴刻度标签的相关设置。
        nameTextStyle: {
          color: "#fff",
        },
        // 刻度颜色
        axisLabel: {
          color: "#fff",
          fontSize: 10,
          interval: 0, // 坐标轴刻度标签的显示间隔
          rotate: 13, // 标签倾斜的角度
        },
        data: x,
      },
    ],
    yAxis: [
      {
        type: "value",
        // y轴字体颜色
        nameTextStyle: {
          color: "#fff",
        },
        // 刻度颜色
        axisLabel: {
          color: "rgba(192, 206, 229, 1)",
        },
        // 分割线颜色
        splitLine: {
          show: true,
          lineStyle: {
            color: "#173B67",
            width: 1,
            type: "solid",
          },
        },
      },
    ],
    series: [
      {
        name: "预警",
        type: "bar", // 柱状图
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 设置两个数值
        },
        emphasis: {
          // 高亮的图形样式和标签样式。
          focus: "series",
        },
        data: y.c,
      },
      {
        name: "故障",
        type: "bar",
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 设置两个数值
        },
        emphasis: {
          focus: "series",
        },
        data: y.b,
      },
      {
        name: "隐患",
        type: "bar",
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 设置两个数值
        },
        emphasis: {
          focus: "series",
        },
        data: y.a,
      },
    ],
  }
}

// 起火原因季节分布图
export const fourCenterRight3Option = (data) => {
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: [
        "电气故障",
        "用火不慎",
        "吸烟",
        "玩火",
        "\n",
        "雷击",
        "自燃",
        "静电",
        "其他",
      ],
      textStyle: {
        color: "#ffffff",
      },
      top: 9,
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    color: [
      "#AFC8FA",
      "#1C64C4",
      "#03F0FF",
      "#5689EE",
      "#56CEA0",
      "#5A6D8F",
      "#8D5CB4",
      "#F49242",
    ],
    xAxis: {
      type: "category",
      alignTicks: "center",
      boundaryGap: false, // 坐标轴两边留白策略
      // x坐标轴刻度标签的相关设置。
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      data: ["春季", "夏季", "秋季", "冬季"],
    },
    yAxis: {
      type: "value",
      // y轴字体颜色
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
      },
      // 分割线颜色
      splitLine: {
        show: true,
        lineStyle: {
          color: "#173B67",
          width: 1,
          type: "solid",
        },
      },
    },
    series: [
      {
        name: data.a.name,
        type: "line",
        data: data.a.data,
      },
      {
        name: data.b.name,
        type: "line",
        data: data.b.data,
      },
      {
        name: data.c.name,
        type: "line",
        data: data.c.data,
      },
      {
        name: data.d.name,
        type: "line",
        data: data.d.data,
      },
      {
        name: data.e.name,
        type: "line",
        data: data.e.data,
      },
      {
        name: data.f.name,
        type: "line",
        data: data.f.data,
      },
      {
        name: data.g.name,
        type: "line",
        data: data.g.data,
      },
      {
        name: data.k.name,
        type: "line",
        data: data.k.data,
      },
    ],
  }
}

// 右边--图表
// 消防队站实力排名
export const fourRight1Option = (result) => {
  // let result = [
  //   { name: "A中队", value: 580 },
  //   { name: "B中队", value: 526 },
  //   { name: "C中队", value: 356 },
  //   { name: "D中队", value: 321 },
  //   { name: "E中队", value: 140 },
  //   { name: "F中队", value: 30 },
  //   { name: "G中队", value: 10 },
  // ]
  return {
    color: ["#eaa257", "#11d8ff", "#11d8ff", "#11d8ff", "#11d8ff", "#11d8ff"],
    tooltip: {
      show: true,
      trigger: "item",
      padding: [8, 15],
      textStyle: {
        color: "rgba(255, 255, 255, 1)",
      },
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b0}: {c0}",
      className: "echarts-tooltip echarts-tooltip-dark",
    },
    legend: {
      show: false,
    },
    grid: {
      left: "100",
      top: "0",
      bottom: "0",
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        type: "category",
        axisTick: {
          show: false,
        },
        inverse: true,
        data: result.map((item) => item.name),
        axisLabel: {
          color: "#fff",
          fontSize: 14,
          // margin: 10,
          width: 50,
          overflow: "truncate",
          padding: [0, 50, 0, 0],
          // 	nameTextStyle: {
          // 	overflow: 'truncate',
          // 	width: 10  // 无法实现坐标轴名称溢出指定宽度隐藏
          // },
          formatter: (name, index) => {
            const id = index + 1
            if (id < 4) {
              return `{icon1|${id}}`
            } else {
              return `{icon2|${id}}`
            }
          },
          rich: {
            icon1: {
              width: 20,
              height: 20,
              padding: [5, 0, 2, 0],
              align: "center",
              backgroundColor: {
                image: icon1,
              },
              color: "#ffffff",
              fontSize: 10,
            },
            icon2: {
              width: 20,
              height: 20,
              padding: [5, 0, 2, 0],
              align: "center",
              color: "#ffffff",
              fontSize: 10,
            },
          },
        },
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          margin: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          formatter: function (value) {
            return value
          },
        },
        data: result.map((item) => item.score),
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 8, // 柱子宽度
        MaxSize: 0,
        barBorderRadius: [30, 0, 0, 30],
        itemStyle: {
          borderRadius: [0, 10, 10, 0], // 设置两个数值上右下左，圆形
        },
        backgroundStyle: {},
        label: {
          show: true,
          offset: [-50, 0],
          color: "#fff",
          fontWeight: 500,
          position: "left",
          align: "left",
          formatter: function (params) {
            return params.data.name
          },
        },
        data: result.map((item) => {
          return {
            name: item.name,
            value: item.score,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#00FFFF",
                  },
                  {
                    offset: 0,
                    color: "#0080FF",
                  },
                ],
              },
            },
          }
        }),
      },
    ],
  }
}

// 消防设施统计
export const fourRight2Option = (info) => {
  return {
    // graphic: {
    //   elements: [
    //     {
    //       type: "image",
    //       style: {
    //         image: "https://csdnimg.cn/release/blogv2/dist/pc/img/original.png",
    //         width: 85,
    //         height: 80,
    //       },
    //       left: "center",
    //       top: "center",
    //     },
    //   ],
    // },
    // graphic: [
    //   {
    //     //环形图中间添加文字
    //     type: "text", //通过不同top值可以设置上下显示
    //     left: "center",
    //     top: "center",
    //     style: {
    //       text: `总数/br 1 `,
    //       textAlign: "center",
    //       fill: "#FFF", //文字的颜色
    //       fontSize: 20,
    //       lineHeight: 20,
    //     },
    //   },
    // ],
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "15%",
      orient: "vertical",
      left: "4%",
      textStyle: {
        color: "#ffffff",
      },
    },
    color: ["#15E986", "#42CCCB", "#2D4AB9", "#2B8CF3", "#9CBED1"],
    series: [
      {
        type: "pie",
        radius: ["40%", "65%"],
        center: ["62%", "55%"],
        label: {
          show: true,
          color: "#fff",
          formatter(param) {
            return param.name + param.value
          },
        },
        itemStyle: {
          borderRadius: 1,
          borderColor: "#081237",
          borderWidth: 5,
        },
        data: info,
      },
    ],
  }
}

// 微型消防站实力排名
export const fourRight3Option = (x, y) => {
  return {
    tooltip: {
      trigger: "item",
    },
    itemStyle: {
      color: ["#E69C00", "#00B5A5", "#0081EB", "#0081EB"],
    },

    // 图表的位置
    grid: {
      left: "12%",
      right: "5%",
      bottom: "15%",
    },
    xAxis: {
      type: "category",
      boundaryGap: true, // 坐标轴两边留白策略
      // x坐标轴刻度标签的相关设置。
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "#fff",
        interval: 0, // 坐标轴刻度标签的显示间隔
        rotate: 0, // 标签倾斜的角度
      },
      data: x,
    },
    yAxis: {
      type: "value",
      // y轴字体颜色
      nameTextStyle: {
        color: "#fff",
      },
      // 刻度颜色
      axisLabel: {
        color: "rgba(192, 206, 229, 1)",
        rotate: 40, // 切斜度数
        fontSize: 10,
      },
      // 分割线颜色
      splitLine: {
        show: true,
        lineStyle: {
          color: "#173B67",
          width: 1,
          type: "solid",
        },
      },
    },
    dataZoom: [
      {
        type: "inside",
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 16, // 柱图宽度
        label: {
          show: true,
          position: "top",
          color: "#fff",
          fontSize: "0.12rem",
        },
        itemStyle: {
          normal: {
            //柱体的颜色
            //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
            color: (params) => {
              // console.log("params", params)
              //这个params可以好好研究！！！！！！！
              //https://echarts.apache.org/zh/option.html#tooltip.formatter
              // console.log(params)
              var colorList = [
                ["#DA691D", "#0D1530"],
                ["#C98800", "#0D1530"],
                ["#00B5A5", "#0D1530"],
                ["#0069C1", "#0D1530"],
                ["#E9E9E9", "#0D1530"],
                ["#7E808D", "#0D1530"],
                ["#00FFFF", "#0C1E46"],
              ]
              var colorItem = colorList[params.dataIndex]
              //直接用官方配好的格式！！！！！！！
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: colorItem[0],
                  },
                  {
                    offset: 1,
                    color: colorItem[1],
                  },
                ],
                false,
              )
            },
          },
        },
        data: y,
      },
    ],
  }
}
